<template>
  <div class="dialog-main">
    <el-form
      ref="form"
      :model="form"
      :rules="rules"
      label-width="180px"
      class="w800p"
    >
      <el-form-item label="活动名称" prop="name">
        <el-input v-model="form.name"></el-input>
      </el-form-item>

      <el-form-item label="添加图片" prop="fileList">
        <el-card
          style="margin-bottom: 20px"
          v-for="(item, index) in form.fileList"
          :key="index"
        >
          <el-row style="border-bottom: 1px solid #f2f4f8; margin-bottom: 15px">
            <el-col :span="21"> 第{{ index + 1 }}行图片 </el-col>
            <el-col :span="3"
              ><el-button @click.prevent="remove(item)">删除</el-button></el-col
            >
          </el-row>

          <el-form-item v-for="(item1, index1) in item" :key="index1">
            <el-upload
              action="/api/upload/image"
              ref="pictureUpload"
              :auto-upload="false"
              list-type="picture-card"
              multiple
              :headers="headers"
              :file-list="imgList"
              :on-change="changeImg"
              :on-remove="removeImg"
              :on-preview="previewImg"
              :prop="'item1.' + index1 + 'img'"
            >
              <i slot="default" class="el-icon-plus"></i>
            </el-upload>
            <el-button @click="submitUpload">上传</el-button>
            <el-form-item
              label="选择图片对应的商品"
              :prop="'item1.' + index1 + '.id'"
            >
              <el-select
                popper-class="select-s"
                style="width: 100%"
                v-model="item1.id"
                placeholder="请选择商品"
                multiple
                filterable
              >
                <el-option
                  v-for="item in appoint_goods1"
                  :label="item.productName"
                  :value="item.id"
                  :key="item.id"
                ></el-option>
              </el-select>
            </el-form-item>

            <el-dialog :visible.sync="dialogVisible" append-to-body>
              <img width="100%" :src="dialogImageUrl" alt="" />
            </el-dialog>
          </el-form-item>
        </el-card>

        <el-button type="primary" @click="addDis">增加一行</el-button>
      </el-form-item>

      <!-- end -->
      <el-form-item label="开始时间" prop="start_at">
        <el-date-picker
          v-model="form.start_at"
          type="datetime"
          placeholder="选择日期时间"
          style="width: 200px"
          @input="change1"
        >
        </el-date-picker>
      </el-form-item>
      <el-form-item label="结束时间" prop="end_at">
        <el-date-picker
          v-model="form.end_at"
          type="datetime"
          placeholder="选择日期时间"
          style="width: 200px"
          @input="change2"
        >
        </el-date-picker>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" size="mini" @click="submitForm('form')"
          >确定</el-button
        >
        <el-button size="mini" @click="cancel">取消</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { getGood } from "@/api/institution";
import { uploadImg, createPicture, editPicture } from "@/api/picture";
import { toDate, toDate1 } from "@/filters";
import { number } from "echarts/lib/export";
export default {
  data() {
    return {
      appoint_goods1: [],
      imgList: [],
      imgList1: {},
      headers: {
        "Content-Type": "multipart/form-data",
      },
      ids: 1,
      form: {
        id: "",
        name: "",
        start_t: "",
        end_t: "",
        fileList: [[{ img: "", id: "" }]],
        appoint_goods: [[]],
      },
      rules: {
        name: [{ required: true, message: "请输入活动名称", trigger: "blur" }],
        appoint_goods: [
          { required: true, message: "请选择对应商品", trigger: "blur" },
        ],
        fileList: [
          {
            required: true,
            message: "请添加图片",
            trigger: "blur",
          },
        ],

        start_at: [
          {
            required: true,
            message: "请选择开始时间",
            trigger: "blur",
          },
        ],
        end_at: [
          {
            required: true,
            message: "请填写结束时间",
            trigger: "blur",
          },
        ],
        id: [
          {
            required: true,
            message: "请选择商品",
            trigger: "blur",
          },
        ],
        img: [
          {
            required: true,
            message: "请选择图片",
            trigger: "blur",
          },
        ],
      },
      dialogImageUrl: "",
      dialogVisible: false,
      disabled: false,
    };
  },
  props: {
    detailData: Object,
  },
  created() {
    if (JSON.stringify(this.detailData) !== "{}") {
      this.form.id = this.detailData.id;
      this.form.name = this.detailData.name;

      this.form.start_at = toDate1(this.detailData.start_at);
      this.form.end_at = toDate1(this.detailData.end_at);
    }
    this.getGoods();
  },
  methods: {
    changeImg(file, fileList) {
      this.imgList1 = [];
      fileList.map((item) => {
        this.imgList1.push(item.raw);
      });
      console.log(this.imgList1);
    },
    removeImg(file, fileList) {
      this.imgList1 = [];
      fileList.map((item) => {
        this.imgList1.push(item.raw);
      });
      console.log(this.imgList1);
    },

    previewImg(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },

    submitUpload() {
      console.log(this.imgList1);
      let fd = new FormData();
      fd.append("file", this.imgList1);

      uploadImg(fd).then((res) => {
        console.log(res);
      });
    },

    //商品
    getGoods() {
      getGood().then((res) => {
        console.log(res);
        this.appoint_goods1 = res.data;
        this.loading = false;
      });
    },
    change1(e) {
      console.log(e);
      this.$set(this.form, "start_at", e);
      this.$forceUpdate();
    },
    change2(e) {
      this.$set(this.form, "end_at", e);
      this.$forceUpdate();
    },

    submitForm(formName) {
      const requestParams = {};
      requestParams["name"] = this.form.name;
      requestParams["start_at"] = toDate(this.form.start_at);
      requestParams["end_at"] = toDate(this.form.end_at);
      requestParams["appoint_goods"] = this.form.appoint_goods;
      requestParams["fileList"] = this.form.fileList;

      this.$refs[formName].validate((valid) => {
        if (valid) {
          console.log(requestParams);
          // if (JSON.stringify(this.detailData) !== "{}") {
          //   requestParams["id"] = this.form.id;
          //   editInstitution(requestParams).then(() => {
          //     this.resetData();
          //     this.$emit("submitData");
          //   });
          // } else {
          //   createInstitution(requestParams).then(() => {
          //     this.resetData();
          //     this.$emit("submitData");
          //   });
          // }
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    resetData() {
      this.form.name = null;
      this.form.start_at = null;
      this.form.end_at = null;
      this.form.imgList = [];
      this.form.content = null;
    },
    cancel() {
      this.$emit("cancel");
    },

    addDis() {
      this.form.fileList.push([{ c: [] }]);
    },

    remove(item) {
      var index = this.form.fileList.indexOf(item);
      if (index !== -1) {
        this.form.fileList.splice(index, 1);
      }
    },
  },
};
</script>
<style lang="scss">
.select-s {
  width: 10% !important;
}
</style>
